<template>
  <div class="reportForm dfsp">
    <div class="hade dfsp">
      <div class="dfsp hadeL size16 sizefw">
        <div
          v-for="(k, i) in TypeList"
          :key="i"
          :class="k.type == FromType ? 'actItem' : 'item'"
          @click="TypeTap(k.type)"
        >
          <!-- {{ k.title }} -->
          {{ t(k.title) }}
        </div>
      </div>
      <div class="dfsp hadeR size14">
        <div
          class="daybtn"
          v-for="(k, i) in StateList"
          :key="i"
          :class="k.state == FromState ? 'day-actItem' : ''"
          @click="StateTap(k.state)"
        >
          <!-- {{ k.title }} -->
          {{ t(k.title) }}
        </div>
      </div>
    </div>
    <div class="content" v-loading="loading">
      <!-- 期指 -->
      <div
        class="list"
        v-for="(item, index) in setmarketGoodsList"
        :key="index"
        v-if="FromType == 1"
      >
        <div class="item itemT">
          <text>{{ t('orderno') }} : {{ item.orderno }}</text>
          <text>{{ t('buytime') }} : {{ item.buytime }}</text>
        </div>
        <div class="item itemB dfsp">
          <div class="name size16 sizefw">
            <img
              :src="
                item.ploss > 0
                  ? 'src/style/img/reportForm/up.png'
                  : 'src/style/img/reportForm/down.png'
              "
              alt=""
            />
            <p class="name-title">{{ item.ptitle }}</p>
          </div>
          <div>
            <text>{{ t('type') }}</text>
            <p v-if="item.is_study == 1">{{ t('imitate') }}</p>
            <p v-else>{{ t('transaction') }}</p>
          </div>
          <div>
            <text>{{ t('spotprice') }}</text>
            <p>{{ item.spotprice }}</p>
          </div>
          <div>
            <text>{{ t('min_dump') }}</text>
            <p>{{ item.min_dump }}</p>
          </div>
          <div>
            <text>{{ t('spotsum') }}</text>
            <p>{{ item.spotsum }}</p>
          </div>
          <div>
            <text>{{ t('mouthsum') }}</text>
            <p>{{ item.mouthsum }}</p>
          </div>
          <!-- 买入价 -->
          <div>
            <text>{{ t('buyprice') }}</text>
            <p class="num-style">
              <el-statistic :value="optimizeNum(item.buyprice)"> </el-statistic>
              <!-- {{ item.buyprice }} -->
            </p>
          </div>
          <!-- 现价 -->
          <div>
            <text>{{ t('sellprice') }}</text>
            <p class="num-style">
              <el-statistic :value="optimizeNum(item.sellprice)"> </el-statistic>
            </p>
          </div>
          <!-- 金额 -->
          <div>
            <text>{{ t('fee') }}</text>
            <p class="num-style">
              <el-statistic :value="optimizeNum(item.fee)"> </el-statistic>
            </p>
          </div>
          <!-- 手续费 -->
          <div>
            <text>{{ t('sx_fee') }}</text>
            <p class="num-style num-style-1">
              <el-statistic :value="optimizeNum(item.sx_fee)"> </el-statistic>
            </p>
          </div>
          <!-- 盈亏 -->
          <div>
            <text>{{ t('ploss') }}</text>
            <p class="zhang ploss" v-if="item.ploss > 0">
              <span style="color: #aa4133">+</span>
              <el-statistic :value="optimizeNum(item.ploss)"> </el-statistic>
            </p>
            <p class="die ploss" v-if="item.ploss < 0">
              <el-statistic :value="optimizeNum(item.ploss)"> </el-statistic>
            </p>
            <p class="default ploss" v-if="item.ploss == 0 || item.ploss == 0.0">
              <el-statistic :value="optimizeNum(item.ploss)"> </el-statistic>
            </p>
          </div>
          <div style="width: auto" v-if="item.ostaus == 0 || item.ostaus == 2">
            <el-button v-if="item.ostaus == 2" @click="patternOpen(item.id)">{{
              t('operate')
            }}</el-button>
            <el-button
              v-else-if="item.storeUp == 1 || item.retentionIs == 0 || item.play_type == 1"
              @click="cloceOrder(item.id)"
              >{{ t('closingposition') }}</el-button
            >
            <el-button v-else-if="item.ostaus == 0" @click="patternOpen(item.id)">{{
              t('operate')
            }}</el-button>
          </div>
        </div>
      </div>
      <!-- 现冲 -->
      <div class="list" v-for="(item, index) in setmarketList" :key="index" v-if="FromType == 2">
        <div class="item itemT">
          <text>{{ t('orderno') }} : {{ item.orderno }}</text>
          <text>{{ t('buytime') }} : {{ item.buytime }}</text>
        </div>
        <div class="item itemB dfsp">
          <div class="name size16 sizefw">
            <img
              :src="
                item.ploss > 0
                  ? 'src/style/img/reportForm/up.png'
                  : 'src/style/img/reportForm/down.png'
              "
              alt=""
            />
            <p class="name-title">{{ item.ptitle }}</p>
          </div>
          <div>
            <text>{{ t('type') }}</text>
            <p v-if="item.is_study == 1">{{ t('imitate') }}</p>
            <p v-else>{{ t('transaction') }}</p>
          </div>
          <div>
            <text>{{ t('endprofit') }}</text>
            <p>{{ item.endprofit }}S</p>
          </div>
          <div>
            <text>{{ t('buyprice') }}</text>
            <p class="num-style">
              <el-statistic :value="optimizeNum(item.buyprice)"> </el-statistic>
              <!-- {{ item.buyprice }} -->
            </p>
          </div>
          <div>
            <text v-if="item.ostaus == '0' || item.ostaus == '2'">{{ t('currentprice') }}</text>
            <text v-else>{{ t('sellingrate') }}</text>
            <p class="num-style">
              <el-statistic :value="optimizeNum(item.sellprice)"> </el-statistic>
            </p>
          </div>
          <div>
            <text>{{ t('fee') }}</text>
            <p class="num-style">
              <el-statistic :value="optimizeNum(item.fee)"> </el-statistic>
            </p>
          </div>
          <div>
            <text>{{ t('sx_fee') }}</text>
            <p class="num-style num-style-1">
              <el-statistic :value="optimizeNum(item.sx_fee)"> </el-statistic>
            </p>
          </div>
          <div>
            <text>{{ t('ploss') }}</text>
            <p class="zhang ploss" v-if="item.ploss > 0">
              <span class="color: #aa4133"></span>
              <el-statistic :value="optimizeNum(item.ploss)"> </el-statistic>
            </p>
            <p class="die ploss" v-if="item.ploss < 0">
              <el-statistic :value="optimizeNum(item.ploss)"> </el-statistic>
            </p>
            <p class="default ploss" v-if="item.ploss == 0 || item.ploss == 0.0">
              <el-statistic :value="optimizeNum(item.ploss)"> </el-statistic>
            </p>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="NoData" v-if="listdata.length == 0">
        <img src="@/style/img/zwsj.png" alt="" />
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="page.page"
        v-model:page-size="page.page_size"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total,sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="dialogVisible" :title="t('operate')" width="18%">
      <div class="btnwarp" style="margin-bottom: 10px">
        <el-button class="itembtn" @click="cloceOrder">{{ t('closingposition') }}</el-button>
      </div>
      <div class="btnwarp">
        <el-button class="itembtn" @click="keepOrder">{{ t('warehouseretention') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from 'vuex'
const store = useStore() //vuex
import { reactive, ref, onMounted, getCurrentInstance, computed } from 'vue'
const { proxy } = getCurrentInstance()
const loading = ref(false) //加载
const FromState = ref(1)
const StateList = reactive([
  {
    title: 'whole',
    state: 1,
  },
  {
    title: 'today',
    state: 2,
  },
  {
    title: 'yesterday',
    state: 3,
  },
  {
    title: 'week',
    state: 4,
  },
  {
    title: 'onemonth',
    state: 5,
  },
  {
    title: 'twomonth',
    state: 6,
  },
])
// 处理数字
const optimizeNum = (value) => {
  if (value) {
    return parseFloat(parseFloat(value).toFixed(2))
  } else {
    return 0
  }
}
const StateTap = (state) => {
  FromState.value = state
  page.time = state
  if (FromType.value == 1) {
    orderGoodsList()
  } else {
    orderList()
  }
}
// 平仓 留仓
const dialogVisible = ref(false)
const order_id = ref('')
const keepOrder = () => {
  ElMessageBox.alert('', t('warehouseretention'), {
    confirmButtonText: t('confirm'),
    callback: (action) => {
      if (action == 'confirm') {
        proxy
          .$post('/mt4/Order/keepOrder', { order_id: order_id.value })
          .then((res) => {
            if (FromType.value == 1) {
              orderGoodsList()
            } else {
              orderList()
            }
          })
          .catch((res) => {
            loading.value = false
          })
      }
    },
  })
}

const cloceOrder = (id) => {
  if (id) {
    order_id.value = id
  }
  ElMessageBox.alert('', t('closingposition'), {
    confirmButtonText: t('confirm'),
    callback: (action) => {
      if (action == 'confirm') {
        proxy
          .$post('/mt4/Order/cloceOrder', { order_id: order_id.value })
          .then((res) => {
            if (FromType.value == 1) {
              orderGoodsList()
            } else {
              orderList()
            }
          })
          .catch((res) => {})
      }
    },
  })
}
const patternOpen = (id) => {
  order_id.value = id
  dialogVisible.value = true
}
// 切换报表类型
const FromType = ref(1)
const TypeList = reactive([
  {
    title: 'FuturesTrading',
    type: 1,
  },
  {
    title: 'Cashtransaction',
    type: 2,
  },
])
const TypeTap = (type) => {
  FromType.value = type
  if (FromType.value == 1) {
    orderGoodsList()
  } else {
    orderList()
  }
}
//
const small = ref(true)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  page.page_size = val
  if (FromType.value == 1) {
    orderGoodsList()
  } else {
    orderList()
  }
}
const handleCurrentChange = (val) => {
  page.page = val
  if (FromType.value == 1) {
    orderGoodsList()
  } else {
    orderList()
  }
}
//
onMounted(() => {
  if (FromType.value == 1) {
    orderGoodsList()
  } else {
    orderList()
  }
})
// 获取列表相关
const listdata = ref([])
const total = ref(10)
const page = reactive({
  page: 1,
  page_size: 10,
  time: 1,
  ostaus: 0,
  is_sum: 1,
  device: 5,
})
// 期指
const orderGoodsList = () => {
  loading.value = true
  proxy
    .$post('/mt4/Order/orderGoodsList', page)
    .then((res) => {
      listdata.value = res.data.list
      total.value = Number(res.total)
      loading.value = false
    })
    .catch((res) => {
      loading.value = false
    })
}
// 现冲
const orderList = () => {
  loading.value = true
  proxy
    .$post('/mt4/Order/orderList', page)
    .then((res) => {
      listdata.value = res.data.list
      total.value = Number(res.total)
      loading.value = false
    })
    .catch((res) => {
      loading.value = false
    })
}

// 对比列表
const setmarketList = computed(() => {
  var getmarketlist = store.state.marketList
  var getlistdata = listdata.value
  if (FromType.value == 2 && getlistdata != null && getlistdata.length > 0) {
    for (let i = 0; i < getlistdata.length; i++) {
      var info = getlistdata[i]
      if (info.ostaus == '0' || info.ostaus == '2') {
        for (let k = 0; k < getmarketlist.length; k++) {
          if (info.pid === getmarketlist[k].id) {
            info.sellprice = getmarketlist[k].price
            break
          }
        }
      }
    }
  }
  // console.log(getlistdata)
  return getlistdata
})
const setmarketGoodsList = computed(() => {
  let getmarketlist = store.state.marketGoodsList
  var getlistdata = listdata.value
  if (FromType.value == 1 && getlistdata != null && getlistdata.length > 0) {
    for (let i = 0; i < getlistdata.length; i++) {
      var info = getlistdata[i]
      if (info.ostaus == '0' || info.ostaus == '2') {
        for (let k = 0; k < getmarketlist.length; k++) {
          if (info.pid === getmarketlist[k].id) {
            info.sellprice = getmarketlist[k].price
            showGains(info)
            break
          }
        }
      }
    }
  }
  // console.log(getlistdata)
  return getlistdata
})
const showGains = () => {
  var gains_str = ''
  if (info.ostaus == '2' || info.ostaus == '3') {
    gains_str = '0.00'
  } else {
    var gain = parseFloat(info.spotprice * info.mouthsum * (info.sellprice - info.buyprice))
    //  "ostyle": "0",  //0涨 1跌，
    if (gain == 0) {
      gains_str = '0.00'
    } else if (gain > 0) {
      if (info.ostyle == '0') {
        gains_str = '+' + Math.abs(gain).toFixed(2)
      } else {
        gains_str = '-' + Math.abs(gain).toFixed(2)
      }
    } else if (gain < 0) {
      if (info.ostyle == '0') {
        gains_str = '-' + Math.abs(gain).toFixed(2)
      } else {
        gains_str = '+' + Math.abs(gain).toFixed(2)
      }
    }
  }
  info.ploss = gains_str
}
</script>

<style scoped lang="scss">
@import '../../style/scss/reportForm';
</style>
